<style scoped lang="less">
	.item {
		background: white;
		padding: 2vw 0;
	}
	.item-qrcode {
		text-align: center;
	}
	
	.item-qrcode-img {
		width: 40vw;
		height: 40vw;
	}
	
	.item-goods-img {
		width: 15vw;
		height: 15vw;
		padding: 1vw;
	}
	
	.item-goods-info {
		display: flex;
	}
	
	.item-goods-info-content {
		width: 80vw;
		text-align: left;
		padding: 1vw;
	}
	
	.item-goods-info-title {
		font-size: 0.4rem;
		line-height: 1.2;
		min-height: 0.8rem;
	}
	
	.item-goods-info-sku {
		display: flex;
		justify-content: space-between;
		font-size: 0.4rem;
		color: @--gray;
	}
</style>
<template>
	<div v-if="order_data!=null">
		<div class="item" v-for="(item,index) in order_data.items" :key="item.id">
			<div class="item-goods-info">
				<img class="item-goods-img" :src="GLOBAL.getUrl(item.goods_img,true,false)">
				<div class="item-goods-info-content">
					<div class="item-goods-info-title">
						{{item.goods_title}}
					</div>
					<div class="item-goods-info-sku">
						<span class="sku-title">{{item.sku_title}}</span>
						<span class="goods-num">×{{item.goods_num}}</span>
					</div>
				</div>
			</div>
			<div class="item-qrcode">
				<img class="item-qrcode-img" :src="item.qrcode_img">
				<CanvasPoster :painting="paintings[index]" @success="buildSuccess" @fail="buildFail"></CanvasPoster>
			</div>
		</div>
	</div>
</template>
<script>
  import {getOrderUseCode} from '../../api/order'
  import CanvasPoster from '../../components/common/BannerBuilder/canvas-poster'

  export default {
    name: 'order-code',
    data() {
      return {
        order_id: null,
        order_data: null,
        code_qrcode: [],
        paintings: []
      }
    },
    components: {
      CanvasPoster
    },
    created() {
      let order_id = this.$route.params.order_id;
      if (order_id) {
        this.order_id = order_id;
        this.getData();
      }
    },
    methods: {
      getData() {
        let vm = this;
        getOrderUseCode(this.order_id).then(rep => {
          let url = document.location.protocol+'//'+document.location.host+'/store_admin/check_code?code=';
          rep.data.data.items.forEach((v ,index)=> {
            let painting = {
              flag:index,
              width: 550, height: 550, views: [
                {
                  type: 'rect',
                  top: 0,
                  left: 0,
                  background: '#f4f5f7',
                  width: 550,
                  height: 550
                },
                {
                  type: 'qrcode',
                  content: url+encodeURIComponent(v.use_code),
                  background: '#fff',
                  color: '#000',
                  left: 0,
                  top: 0,
                  width: 550,
                  height: 550
                }
              ]
            };
            vm.paintings.push(painting);
            v.qrcode_img = null;
          });
          vm.order_data = rep.data.data;

        });
      },
      buildSuccess(img) {
        this.order_data.items[img.flag].qrcode_img = img.img;
      },
      buildFail(e) {
        alert('失败');
      }
    }
  }
</script>